<template>
  <div class="home-header">
    <div class="logo"></div>
    <div class="breadcrumb-warp">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ name: 'QuickNavigation' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentViewTitle }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentOpenView }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="nav">
      <div>{{nickName}} - {{ city }} - {{ identityName }}</div>
      <el-button v-if="false" type="primary" plain round size="small" @click="handlerClickBtnGoHome">首页</el-button>
      <el-button v-if="false" type="danger" plain round size="small" @click="handlerClickBtnClockin">打卡</el-button>
    </div>
    <UserInfo />
  </div>
</template>

<script setup lang="ts">
import { useCurrentViews, useUsersStore } from '../../stores'
import { useRouter } from 'vue-router'
import { ref, watch, nextTick, computed, onMounted } from 'vue'
import UserInfo from './UserInfo.vue'

const router = useRouter()
const isDev = ref(true)
const currentOpenView = ref('')
const viewsStore = useCurrentViews()
const city = ref('')
const nickName = ref('')
const identityName = ref('')

// 缓存 getAllState() 的结果
const allState = computed(() => viewsStore.getAllState())
const currentViewTitle = computed(() => allState.value.meta.title)

onMounted(() => {
  const userStore = useUsersStore().user as any
  // console.log('userStore', userStore)
  city.value = userStore.city || ''
  nickName.value = userStore.nickName || ''
  identityName.value = userStore.identityName || ''
})

watch(
  () => router.currentRoute.value,
  async (newValue) => {
    await nextTick(() => {
      const item = allState.value.children.find((e: any) => e.path === newValue.path)
      if (item?.meta.title !== currentOpenView.value) {
        currentOpenView.value = item?.meta.title || ''
      }
    })
  },
  {
    immediate: true,
    deep: true,
  }
)

if (import.meta.env.VITE_APP_ENV === 'production') {
  isDev.value = false
}

const emits = defineEmits(['clickBtnClockin'])

const handlerClickBtnClockin = () => {
  emits('clickBtnClockin')
}

const handlerClickBtnGoHome = () => {
  router.push({ name: 'QuickNavigation' })
}
</script>

<style lang="scss" scoped>
.home-header {
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  .breadcrumb-warp {
    padding: 0 20px 0;
  }
  .nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
  }
}
</style>
